import { withRouter } from "react-router-dom";
import { Flex } from "antd-mobile";
import React, { Component } from "react";
import "../../assets/fonts/iconfont.css";
import { get_Current_City } from "../../utils/biz_http.js";

class Search extends Component {
  state = {
    cityName: "上海",
  };

  componentDidMount() {
    this.getCityName();
  }

  async getCityName() {
    // var myCity = new window.BMap.LocalCity();
    // myCity.get(async (result) => {
    //   // 根据城市获取相应的城市信息
    //   let res = await get_Current_City({ name: result.name });
    //   this.setState({
    //     cityName: res.data.body.label,
    //   });
    // });
    let res = await get_Current_City();
    // console.log(res);
    this.setState({
      cityName: res.label,
    });
  }

  render() {
    return (
      <div className="search">
        <Flex className="" justify="between">
          <div className="left">
            <Flex>
              <div className="area">
                <span
                  onClick={() => {
                    this.props.history.push("/citylist");
                  }}
                >
                  {this.state.cityName}
                </span>
                <i className="iconfont icon-arrow arrow"></i>
              </div>
              <div className="seachicon">
                <Flex>
                  <input type="text" placeholder="请输入小区或地址" />

                  <i className="iconfont icon-seach"></i>
                </Flex>
              </div>
            </Flex>
          </div>

          <i
            className="iconfont icon-map right"
            onClick={() => {
              this.props.history.push("/map");
            }}
          ></i>
        </Flex>
      </div>
    );
  }
}

export default withRouter(Search);
